<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
// 获取DOM节点
let charts = ref()
// 组件挂载完毕
onMounted(() => {
    let mychart = echarts.init(charts.value)
    // 设置配置项
    mychart.setOption({
        title: {
            text: '散点图',
            left: '40%',
            textStyle: {
                color: 'white'
            }
        },
        xAxis: {
            type: 'category',
            show: true
        },
        yAxis: {
            show: false
        },
        grid: {
            left: 20,
            top: 20,
            right: 0,
            bottom: 20
        },
        series: {
            type: 'scatter',
            data: [330, 888, 210, 990, 788, 234, 1213, 1231, 2274, 333, 444, 667, 890, 2456, 2333, 2500],
            symbol: 'arrow',
            symbolSize: 10,
            // 图文标签
            label: {
                show: true,
                position: 'top',
                color: 'yellowgreen'
            },
            // 散点图标记的颜色
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red'
                    }, {
                        offset: 1, color: 'blue'
                    }],
                    global: false
                }
            }
        }
    })

})
</script>

<template>
    <div class="box7">
        <div class="title">
            <p>年度游客量对比</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style lang="scss" scoped>
.box7 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;
    margin: 20px 0px;

    .title {

        p {
            color: white;
            font-size: 16px;
        }

        img {
            margin-top: 10px;
        }
    }

    .charts {
        height: calc(100% - 30px);
    }
}
</style>